import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false


// 5. 注入到Vue实例中（挂载到vue根实例上）
 new Vue({
  render: h => h(App),
  router
}).$mount('#app')


// 1. 下载vue-touer 3.6.5
// 2. 引入VueRouter
// 3. Vue.use()
// 4. 创建router实例
// 5. 挂载到vue根实例上


// 区分 router / routes / route

// 1. router : 整个全局最大的路由实例，只有一个，唯一的
// 2. routes : 路由规则的列表，里面是一个数组，里面的每一条规则又是一个对象
      // [{},{},{}]
// 3. route  : 一条路由规则，每一条规则都是一个对象
// { path: '路径', component: 组件名 }  ==> route


// 核心的两个步骤
// 1. 配置路由规则 ： 路径 和 组件 的 映射关系，告诉我们，什么路径渲染什么组件
// 2. 指定路由出口 ： 挖坑占位，告诉我们组件应该在哪里渲染展示
// <router-view></router-view>  
// ==> router-view本质上是vue-router提供给我们的一个全局组件


// 面试题？
// 当我们执行 new Vue() 的时候，经过了哪些步骤？
// 1. new Vue()
// function Vue(options){
//   this._init(options)
// }
// 2. this._init()

// 3. Vue.prototype._init = function(){

    // initLifeCycle()
    // initEvents()
    // initRender()
    // ===>  beforeCreate
    // initInjections()
    // initState()   ===> props/data/methods/watch/computed
    // initProvide()
    // ===>  created

    //  ===> $mount()  挂载
// } 
// 4. initState ==> if(opts.data)  ==> initData(vm)  ==> observe(data)

// ==>  return new Observer()  ==>Observer这个类里面有一个defineReactive方法
// ==> 将data对象做一些响应式监听 ==> Object.defineProperty


// Object.defineProperty



